import React from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import '../../assets/fonts/iconfont.css'
import './home.css'

import Index from '../Index'
import News from '../News'
import Profile from '../Profile'
import SearchList from '../SearchList'

const tabBars = [
  { title: '首页', icon: 'iconfont icon-ind', path: '/home' },
  { title: '找房', icon: 'iconfont icon-findHouse', path: '/home/list' },
  { title: '资讯', icon: 'iconfont icon-infom', path: '/home/news' },
  { title: '我的', icon: 'iconfont icon-my', path: '/home/profile' }
]

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname
  }

  render() {
    return (
      <div className="App">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        <Route path="/home/list" component={SearchList}></Route>
        <div
          className="tab-bar"
          style={{ position: 'fixed', bottom: 0, height: 50, width: '100%' }}
        >
          <TabBar
            unselectedTintColor="#949494"
            tintColor="rgb(33, 185, 122)"
            barTintColor="white"
            tabBarPosition={'bottom'}
          >
            {tabBars.map(e => {
              return (
                <TabBar.Item
                  title={e.title}
                  key={e.path}
                  icon={<i className={e.icon}></i>}
                  selectedIcon={<i className={e.icon}></i>}
                  selected={this.state.selectedTab === e.path}
                  onPress={() => {
                    this.setState({
                      selectedTab: e.path
                    })
                    this.props.history.push(e.path)
                  }}
                ></TabBar.Item>
              )
            })}
          </TabBar>
        </div>
      </div>
    )
  }
}
